---
import { Header, BaseHead, Footer } from "#components/fragments";
import { format } from "date-fns";
import { Content, ContentPiece, getStaticPaths } from "virtual:vrite";
import { convert } from "html-to-text";
import "#styles/blog.scss";

type Props = ContentPiece;

const { title, description, date, coverUrl } = Astro.props;

export const prerender = true;
export { getStaticPaths };
---

<html lang="en" class="bg-gray-50 dark:bg-gray-800">
  <head>
    <BaseHead
      title={title}
      description={convert(description || "", { wordwrap: false })}
      image={coverUrl}
    />
  </head>

  <body class="overflow-x-hidden">
    <main
      class="flex flex-col items-center justify-center gap-8 p-4 pb-0 bg-gray-50 dark:bg-gray-800"
    >
      <div class="w-full flex justify-center items-start max-w-screen-lg">
        <Header client:idle />
      </div>
      <div class="mt-8 md:mt-16 relative z-1 text-xl max-w-[calc(70ch+8rem)]">
        <div class="grid-background-2"></div>
        <div class="px-16">
          <img
            src={coverUrl}
            alt="Blog post cover"
            class="object-cover max-w-screen-lg w-full rounded-3xl shadow-2xl shadow-gray-400 dark:shadow-gray-900 before:bg-gray-100 dark:before:bg-gray-800"
          />
        </div>
      </div>
      <div
        class="relative z-1 text-xl max-w-[70ch] prose dark:prose-invert text-gray-600 dark:text-gray-100 w-full pb-8 md:pt-0"
      >
        <div class="w-full justify-start items-center flex gap-2">
          <span class="text-gray-500 dark:text-gray-400 text-base"> Arek Nawo</span>
          <div class="h-4 w-px rounded-full bg-gray-500 dark:bg-gray-400"></div>
          <span class="text-gray-500 dark:text-gray-400 text-base">
            {format(date ? new Date(date) : new Date(), "dd MMM yyyy")}
          </span>
        </div>
        <header>
          <h1 class="!font-bold">{title}</h1>
        </header>
        <Content contentPieceId={Astro.props.id} />
      </div>

      <Footer />
    </main>
  </body>
</html>
